<template>
   <div>
       <ShaiXuan @sss="form" :date="true" :select="select"></ShaiXuan>
       <div class="mysos-flat">
        <div class=" txzboys kkw">
            <i class="el-icon-s-unfold"></i>
            数据列表
        </div>
        <div class=" txzboys kkc">
            <el-button @click="HelloVue" size="mini">添加</el-button>
            <el-button size="mini">导出</el-button>
            <template>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in godss"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
            <template>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in gudrs"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </template>
        </div>
       </div>


       <div>
           <el-table
                   :data="tableData"
                   border
                   style="width: 100%">
               <el-table-column
                       fixed
                       prop="id"
                       label="编号"
                       width="80"
                       text-align="center">
               </el-table-column>
               <el-table-column
                       prop="createDate"
                       label="创建日期"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="supplier"
                       label="供货厂商"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="price"
                       label="总金额"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="needDate"
                       label="需用日期"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="createPerson"
                       label="创建人"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="approver"
                       label="审批人"
                       width="100">
               </el-table-column>
               <el-table-column
                       prop="payType"
                       label="付款类型"
                       width="100">

               </el-table-column>
               <el-table-column
                       prop="status"
                       label="审批操作"
                       width="100">
                   <template slot-scope="scope">
                       <el-button type="text" size="small" @click="shenhe(scope.row)">审核</el-button>
                   </template>
               </el-table-column>
               <el-table-column
                       label="操作"
                       width="120">
                   <template slot-scope="scope">
                       <el-button @click="handleClick(scope.row)" type="text" size="small">预览</el-button>
                       <el-button type="text" @click="myclis(scope)" size="small">编辑</el-button>
                       <el-button type="text"  @click="open(scope.row.id)" size="small">删除</el-button>
                   </template>
               </el-table-column>
           </el-table>
       </div>
       <div class="bodey">
           <el-pagination
                   background
                   layout="prev, pager, next"
                   :total="1000">
           </el-pagination>
       </div>
       <el-dialog title="编辑内容" :visible.sync="dialogFormVisible">
           <el-form :model="form1">
               <el-form ref="form" :model="form.name" label-width="80px">
                   <el-form-item label="供应厂商">
                       <el-select v-model="form.region" >
                           <el-option label="A" value="shanghai"></el-option>
                           <el-option label="B" value="beijing"></el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="创建人">
                       <el-select v-model="form.region">
                           <el-option label="A" value="shanghai"></el-option>
                           <el-option label="B" value="beijing"></el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="审批人">
                       <el-select v-model="form.region" >
                           <el-option label="A" value="kitv"></el-option>
                           <el-option label="B" value="dfdf"></el-option>
                       </el-select>
                   </el-form-item>
                   <el-form-item label="需用日期">
                       <el-col :span="11">
                           <el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 100%;"></el-date-picker>
                       </el-col>
                   </el-form-item>
                   <el-form-item label="付款类型">
                       <el-checkbox-group v-model="form.type">
                           <el-checkbox label="微信" name="sex"></el-checkbox>
                           <el-checkbox label="支付宝" name="sex"></el-checkbox>
                           <el-checkbox label="现金" name="sex"></el-checkbox>
                           <el-checkbox label="银行卡" name="sex"></el-checkbox>
                       </el-checkbox-group>
                   </el-form-item>
                   <el-form-item label="审批建议">
                       <el-input type="textarea" v-model="form.desc"></el-input>
                   </el-form-item>
               </el-form>
           </el-form>
           <div slot="footer" class="dialog-footer">
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
           </div>
       </el-dialog>
   </div>
</template>
<script>
    import ShaiXuan from "@/components/shaixuan/ShaiXuan";
    import {shengpiApi,getApi,delpi,} from "@/http/proApi/caigou"
    export default {
        created() {
            this.getInfo(this.page,this.size)
        },
        methods: {
            handleClick(row) {
                console.log(row);
                this.$router.push("/purchase/cai");
            },
            form(form){
                console.log(form)
            },
            HelloVue(){//添加跳转
               this.$router.push('/purchase/apply');
            },
            open(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delpi(id)
                    .then(res=>{
                        console.log(res)
                        if(res.data.code==200){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                            this.getInfo(this.page,this.size)//渲染
                        }
                    })
                    .catch(e=>{
                     console.log(e)
                    })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            myclis() {
                this.dialogFormVisible = true
            },

            getInfo(page,size){
                getApi(page,size)
                .then((res)=>{
                    console.log("获取信息：",res)
                    this.tableData=res.data.data
                })
                .catch((err)=>{
                    console.log(err)
                })
            },
            shenhe(row){
                console.log(row)
                shengpiApi(row.id,row.status)
                .then((res)=>{
                    console.log(res)
                })
                .catch((err)=>{
                    console.log("请求失败：",err)
                })
            },
            goodclr(row){
                shengpiApi(row.purchase).then((res)=>{
                    console.log(res)
                })
            },
            // zesaa(){ //input下拉数据
            //     gohuo().then((res)=>{
            //         console.log(res);
            //     })
            // }

        },

        components:{
            ShaiXuan,
        },
        data() {
            return {
                page:1,
                size:10,
                dialogFormVisible:false,
                form1: {
                    name: '',
                    region: '',
                },
                godss: [{
                    value: '选项1',
                    label: 'A某'
                }, {
                    value: '选项2',
                    label: 'B某'
                }, {
                    value: '选项3',
                    label: 'C某'
                }, {
                    value: '选项4',
                    label: '零林'
                }],
                gudrs: [{
                    value: '选项1',
                    label: 'A区'
                }, {
                    value: '选项2',
                    label: 'B区'
                }, {
                    value: '选项3',
                    label: 'C区'
                }, {
                    value: '选项4',
                    label: 'D区'
                }],
                formLabelWidth: '120px',
                select:[
                    {
                        label:"供货厂商",
                        select: ['A供应商','B供应商','C供应商'],
                        user:"user"
                    },
                    {
                        label:"采购状态",
                        select: ['已入库','已审核','未审核'],
                        user:"region"
                    }
                ],
                tableData: [
                ],
                    dete: {
                    name: '',
                    region: '',
                    date1: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },

    }

</script>

<style lang="scss" scoped>

    .clear::before,
    .clear::after{
        display: block;
        content: '';
    }
    .clear::after{
        clear:both;
    }

   .txzboys{
       float: left;

   }
    .kkw{
        width:200px;
        height:45px;
        margin-left: 20px;
    }
    .kkc{
        height: 45px;
        margin-left:260px;
    }
    .mysos-flat{
        width: 100%;
        height:45px;
        background: #e4e4e4 ;
        line-height:45px;
        font-size:13px;
    }

.cell{
    text-align: center ;
    font-size: 12px;
}
    .myboxto{
        width: 100%;
        height:35px;
        background: #d9d9d9 ;
        line-height:35px;
        font-size: 12px;
    }
    .dods{
        margin-bottom: 20px;
    }

    .employees-header{
        font-size: 13px;
    }


.dods-v{
    width: 100%;
    height:35px;
    background: rgba(217, 217, 217, 0.69);

}
    .dods-top{
        width: 99.95%;
        height: 45px;
        border:1px solid #d9d9d9 ;
        line-height:44px;
    }
.el-input__inner{
    width:180px;
    height:35px;
    margin-left:10px;
    /*background: #409EFF;*/

    .el-input__icon {
        margin-left:20px;
    }
}
.el-pagination {
    float: right;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
    .bodey{
        width: 100%;
        height: 35px;
        background:rgba(217, 217, 217, 0.69) ;
    }


    .header {
    margin-bottom: 20px;
    }
</style>